<template>
  <div>
    <i-button :buttonData="buttonData" @btnClick="init()"></i-button>
    <IDialog :dialogData="dialogData">
      <a-layout class="role-setting-user-content">
        <a-layout-header>
          <i-search :searchOptions='searchOptions' @resetSubmitFun="resetSubmitFun" @searchSubmitFun="searchSubmitFun"></i-search>
        </a-layout-header>
        <a-layout-content>
          <i-vxe-table :tableData="tableData" ref="tableRef" @updateFun="updateFun" @deleteFun="deleteFun" @selectCheckFun="selectCheckFun">
            <template #status_template="{ obj }">
              <span v-text="statusTemplateFun(obj)"></span>
            </template>
            <template #accountStatus_template="{ obj }">
              <span v-text="accountStatusTemplateFun(obj)"></span>
            </template>
          </i-vxe-table>
        </a-layout-content>
      </a-layout>
    </IDialog>
    <lib-doc :libDocData="libDocData"></lib-doc>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, reactive, ref } from 'vue'
import { IButton, IDialog, ISearch, IVxeTable } from 'wd-platform-library'
import { ButtonInterFace } from 'wd-platform-library/lib/src/IButton/src/ButtonInterFace'
import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { SearchInterFace } from 'wd-platform-library/lib/src/ISearch/src/ISearchInterFace'
import {
    TableDataInterFace,
    ResultInterFace
} from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
interface SearchParam {
name: string;
  city: string|null;
  rangePicker: string|null;
  cascaderList: string[]|null;
}
interface UserResultInterFace {
  userName: string;
  userCode: string;
  mobile: string;
  workMobile: string;
  accountStatus: string;
  status: string;
}
export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const dataList = [
            {
                id: 10891065345474561,
                menuName: '权限管理',
                children: [
                    {
                        id: 10948510534696991,
                        menuName: '角色管理'
                    },
                    {
                        id: 10948510534697001,
                        menuName: '菜单管理'
                    },
                    {
                        id: 10948510534697011,
                        menuName: '用户管理'
                    },
                    {
                        id: 10948510534697021,
                        menuName: '资源管理'
                    },
                    {
                        id: 10948510534697031,
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: 10948510534696971,
                menuName: '系统管理',
                children: [
                    {
                        id: 10948510534697041,
                        menuName: '应用管理'
                    },
                    {
                        id: 1094851053469705,
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        // 弹框触发按钮-----------------
        const buttonData: ButtonInterFace = {
            loading: false,
            label: '弹窗',
            isShow: true,
            Fun: 'btnClick'
        }
        // 弹框属性-------------------------------------------------------
        const dialogData = reactive<DialogDataInterface>({
            width: 1200, // 弹框宽度
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: async () => {
                const sleep = (millisecond:number) => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true)
                        }, millisecond)
                    })
                }
                await sleep(2000)
                dialogData.onCancel && dialogData.onCancel()
            },
            onCancel: () => {
                searchOptions.form = {
                    name: '',
                    city: null,
                    rangePicker: null,
                    cascaderList: []
                }
                dialogData.show = false
            }
        })
        // 搜索条件  -------------------------------------------------------
        const searchOptions: SearchInterFace<SearchParam> = reactive({
            form: {
                name: '',
                city: null,
                rangePicker: null,
                cascaderList: []
            },
            fieldDataList: [
                {
                    labelWidth: 70,
                    type: 'input', // form表单类型
                    label: '姓名', // 字段描述信息
                    field: 'name' // form 对应字段
                },
                {
                    labelWidth: 70,
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        }
                    ],
                    callback: (data: any, fieldDataItem: any) => {
                        alert('我选择了' + data + '  返回当前对象:' + JSON.stringify(fieldDataItem))
                    }
                },
                {
                    labelWidth: 70,
                    type: 'rangePicker', // form表单类型
                    label: '时间', // 字段描述信息
                    field: 'rangePicker' // form 对应字段
                },
                {
                    labelWidth: 90,
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    options: {
                        fieldNames: {
                            label: 'menuName',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })

        // 表格属性------------------------------------
        const tableRef = ref()
        const tableData = reactive<TableDataInterFace>({
            type: 'dialog-table-demo', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'userName',
                        minWidth: 80,
                        title: '用户姓名'
                    },
                    {
                        field: 'userCode',
                        minWidth: 120,
                        title: '用户工号'
                    },
                    {
                        field: 'mobile',
                        minWidth: 120,
                        title: '用户手机号'
                    },
                    {
                        field: 'workMobile',
                        minWidth: 100,
                        title: '虚拟手机号'
                    },
                    {
                        field: 'accountStatus',
                        width: 80,
                        slots: {
                            default: 'accountStatus_template'
                        },
                        title: '账号状态'
                    },
                    {
                        field: 'status',
                        width: 80,
                        slots: {
                            default: 'status_template'
                        },
                        title: '人员状态'
                    }
                ], // 表头配置
                data: [], // 数据集合
                maxHeight: 550
            },
            callback: async (pageInfo: any) => {
                dialogData.loading = true
                alert('分页数据:   ' + JSON.stringify(pageInfo))
                /**
                 * 此处调用接口
                 */
                var userList = []
                for (let index = 0; index < 20; index++) {
                    userList.push({
                        userName: (searchOptions.form.name || '小刀刀') + index,
                        userCode: '011' + index,
                        mobile: '1509334317' + (index < 10 ? '0' + index : index),
                        workMobile: '1509334317' + (index < 10 ? '0' + index : index),
                        accountStatus: index % 2 === 0 ? '1' : '0',
                        status: index % 2 === 0 ? '1' : '0'
                    })
                }
                setTimeout(() => {
                    dialogData.loading = false
                }, 2000)
                return {
                    total: 20,
                    resultList: userList
                } as ResultInterFace<UserResultInterFace>
            },
            titleOperation: [
                {
                    label: '获取选中',
                    isShow: true,
                    buttonFun: 'selectCheckFun'
                },
                {
                    label: '获取选中',
                    isShow: true,
                    position: 'right',
                    buttonFun: 'selectCheckFun'
                }
            ],
            operation: {
                label: '操作',
                dataList: [
                    {
                        label: '编辑',
                        isShow: true,
                        buttonFun: 'updateFun',
                        width: 48
                    },
                    {
                        label: '删除',
                        isShow: true,
                        buttonFun: 'deleteFun',
                        width: 48,
                        remindData: {
                            isShow: true,
                            remindTitle: '是否删除',
                            remindContext: '删除后数据将无法恢复'
                        }
                    }
                ]
            },
            authControl: {
                isAutoSelect: false,
                isCheckBox: true
            }
        })

        // 自定义表格内容
        const statusTemplateFun = (data: any) => {
            return data.status === '0' ? '离职' : '在职'
        }
        // 自定义表格内容
        const accountStatusTemplateFun = (data: any) => {
            return data.accountStatus === '0' ? '启用' : '停用'
        }
        // 搜索条件查询
        const searchSubmitFun = () => {
            alert('搜索条件:   ' + JSON.stringify(searchOptions.form))
            tableRef.value.initSelectTableList()
        }
        // 搜索条件重置
        const resetSubmitFun = () => {
            searchOptions.form = {
                name: '',
                city: null,
                rangePicker: null,
                cascaderList: []
            }
            tableRef.value.initSelectTableList()
        }
        // 初始化表格内容
        const init = () => {
            dialogData.show = true
            nextTick(() => {
                tableRef.value.initSelectTableList()
            })
        }
        // 表格获取选中
        const selectCheckFun = (dataList: Array<any>) => {
            alert('获取选中' + dataList)
        }
        // 表格单行功能
        const updateFun = (data: any) => {
            alert('点击编辑' + JSON.stringify(data))
        }
        // 表格单行功能
        const deleteFun = (data: any) => {
            alert('点击删除' + JSON.stringify(data))
        }
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '整体代码',
                    type: 'pre',
                    value: `
 <template>
  <div>
    <i-button :buttonData="buttonData" @btnClick="init()"></i-button>
    <IDialog :dialogData="dialogData">
      <a-layout class="role-setting-user-content">
        <a-layout-header>
          <i-search :searchOptions='searchOptions' @resetSubmitFun="resetSubmitFun" @searchSubmitFun="searchSubmitFun"></i-search>
        </a-layout-header>
        <a-layout-content>
          <i-vxe-table :tableData="tableData" ref="tableRef" @updateFun="updateFun" @deleteFun="deleteFun" @selectCheckFun="selectCheckFun">
            <template #status_template="{ obj }">
              <span v-text="statusTemplateFun(obj)"></span>
            </template>
            <template #accountStatus_template="{ obj }">
              <span v-text="accountStatusTemplateFun(obj)"></span>
            </template>
          </i-vxe-table>
        </a-layout-content>
      </a-layout>
    </IDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, reactive, ref } from 'vue'
import { IButton, IDialog, ISearch, IVxeTable } from 'wd-platform-library'
import { ButtonInterFace } from 'wd-platform-library/lib/src/IButton/src/ButtonInterFace'
import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
import { SearchInterFace } from 'wd-platform-library/lib/src/ISearch/src/ISearchInterFace'
import {
    TableDataInterFace,
    ResultInterFace
} from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
interface SearchParam {
  name: string;
  city: string|null;
  rangePicker: string|null;
  cascaderList: string[]|null;
}
interface UserResultInterFace {
  userName: string;
  userCode: string;
  mobile: string;
  workMobile: string;
  accountStatus: string;
  status: string;
}
export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const dataList = [
            {
                id: 10891065345474561,
                menuName: '权限管理',
                children: [
                    {
                        id: 10948510534696991,
                        menuName: '角色管理'
                    },
                    {
                        id: 10948510534697001,
                        menuName: '菜单管理'
                    },
                    {
                        id: 10948510534697011,
                        menuName: '用户管理'
                    },
                    {
                        id: 10948510534697021,
                        menuName: '资源管理'
                    },
                    {
                        id: 10948510534697031,
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: 10948510534696971,
                menuName: '系统管理',
                children: [
                    {
                        id: 10948510534697041,
                        menuName: '应用管理'
                    },
                    {
                        id: 1094851053469705,
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        // 弹框触发按钮-----------------
        const buttonData: ButtonInterFace = {
            loading: false,
            label: '弹窗',
            isShow: true,
            Fun: 'btnClick'
        }
        // 弹框属性-------------------------------------------------------
       const dialogData = reactive<DialogDataInterface>({
            width: 1200, // 弹框宽度
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: async () => {
                const sleep = (millisecond:number) => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true)
                        }, millisecond)
                    })
                }
                await sleep(2000)
                dialogData.onCancel && dialogData.onCancel()
            },
            onCancel: () => {
                searchOptions.form = {
                    name: '',
                    city: null,
                    rangePicker: null,
                    cascaderList: []
                }
                dialogData.show = false
            }
        })
        
        // 搜索条件  -------------------------------------------------------
        const searchOptions: SearchInterFace<SearchParam> = reactive({
            form: {
                name: '',
                city: null,
                rangePicker: null,
                cascaderList: []
            },
            fieldDataList: [
                {
                    labelWidth: 70,
                    type: 'input', // form表单类型
                    label: '姓名', // 字段描述信息
                    field: 'name' // form 对应字段
                },
                {
                    labelWidth: 70,
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        }
                    ],
                    callback: (data: any, fieldDataItem: any) => {
                        alert('我选择了' + data + '  返回当前对象:' + JSON.stringify(fieldDataItem))
                    }
                },
                {
                    labelWidth: 70,
                    type: 'rangePicker', // form表单类型
                    label: '时间', // 字段描述信息
                    field: 'rangePicker' // form 对应字段
                },
                {
                    labelWidth: 90,
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    options: {
                        fieldNames: {
                            label: 'menuName',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })

        // 表格属性------------------------------------
        const tableRef = ref()
        const tableData = reactive<TableDataInterFace>({
            type: 'dialog-table-demo', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'userName',
                        minWidth: 80,
                        title: '用户姓名'
                    },
                    {
                        field: 'userCode',
                        minWidth: 120,
                        title: '用户工号'
                    },
                    {
                        field: 'mobile',
                        minWidth: 120,
                        title: '用户手机号'
                    },
                    {
                        field: 'workMobile',
                        minWidth: 100,
                        title: '虚拟手机号'
                    },
                    {
                        field: 'accountStatus',
                        width: 80,
                        slots: {
                            default: 'accountStatus_template'
                        },
                        title: '账号状态'
                    },
                    {
                        field: 'status',
                        width: 80,
                        slots: {
                            default: 'status_template'
                        },
                        title: '人员状态'
                    }
                ], // 表头配置
                data: [], // 数据集合
                maxHeight: 550
            },
            callback: async (pageInfo: any) => {
                dialogData.loading = true
                alert('分页数据:   ' + JSON.stringify(pageInfo))
                /**
                 * 此处调用接口
                 */
                var userList = []
                for (let index = 0; index < 20; index++) {
                    userList.push({
                        userName: (searchOptions.form.name || '小刀刀') + index,
                        userCode: '011' + index,
                        mobile: '1509334317' + (index < 10 ? '0' + index : index),
                        workMobile: '1509334317' + (index < 10 ? '0' + index : index),
                        accountStatus: index % 2 === 0 ? '1' : '0',
                        status: index % 2 === 0 ? '1' : '0'
                    })
                }
                setTimeout(() => {
                    dialogData.loading = false
                }, 2000)
                return {
                    total: 20,
                    resultList: userList
                } as ResultInterFace<UserResultInterFace>
            },
            titleOperation: [
                {
                    label: '获取选中',
                    isShow: true,
                    buttonFun: 'selectCheckFun'
                },
                {
                    label: '获取选中',
                    isShow: true,
                    position: 'right',
                    buttonFun: 'selectCheckFun'
                }
            ],
            operation: {
                label: '操作',
                dataList: [
                    {
                        label: '编辑',
                        isShow: true,
                        buttonFun: 'updateFun',
                        width: 48
                    },
                    {
                        label: '删除',
                        isShow: true,
                        buttonFun: 'deleteFun',
                        width: 48,
                        remindData: {
                            isShow: true,
                            remindTitle: '是否删除',
                            remindContext: '删除后数据将无法恢复'
                        }
                    }
                ]
            },
            authControl: {
                isAutoSelect: false,
                isCheckBox: true
            }
        })

        // 自定义表格内容
        const statusTemplateFun = (data: any) => {
            return data.status === '0' ? '离职' : '在职'
        }
        // 自定义表格内容
        const accountStatusTemplateFun = (data: any) => {
            return data.accountStatus === '0' ? '启用' : '停用'
        }
        // 搜索条件查询
        const searchSubmitFun = () => {
            alert('搜索条件:   ' + JSON.stringify(searchOptions.form))
            tableRef.value.initSelectTableList()
        }
        // 搜索条件重置
        const resetSubmitFun = () => {
            searchOptions.form = {
                name: '',
                city: null,
                rangePicker: null,
                cascaderList: []
            }
            tableRef.value.initSelectTableList()
        }
        // 初始化表格内容
        const init = () => {
            dialogData.show = true
            nextTick(() => {
                tableRef.value.initSelectTableList()
            })
        }
        // 表格获取选中
        const selectCheckFun = (dataList: Array<any>) => {
            alert('获取选中' + dataList)
        }
        // 表格单行功能
        const updateFun = (data: any) => {
            alert('点击编辑' + JSON.stringify(data))
        }
        // 表格单行功能
        const deleteFun = (data: any) => {
            alert('点击删除' + JSON.stringify(data))
        }
        return {
            deleteFun,
            updateFun,
            init,
            selectCheckFun,
            resetSubmitFun,
            statusTemplateFun,
            accountStatusTemplateFun,
            searchSubmitFun,
            searchOptions,
            tableData,
            tableRef,
            buttonData,
            dialogData
        }
     },
    components: {
        IDialog,
        ISearch,
        IVxeTable,
        IButton,
    }
})
<script>
  `
                }
            ]
        }
        return {
            deleteFun,
            updateFun,
            init,
            selectCheckFun,
            resetSubmitFun,
            statusTemplateFun,
            accountStatusTemplateFun,
            searchSubmitFun,
            searchOptions,
            tableData,
            tableRef,
            libDocData,
            buttonData,
            dialogData
        }
    },
    components: {
        IDialog,
        ISearch,
        IVxeTable,
        IButton,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
